<template>
  <button
    class="volvo-button"
    :class="[
      `volvo-button--${type}`,
      `volvo-button--${size}`,
      {
        'volvo-button--loading': loading,
        'volvo-button--disabled': disabled,
        'volvo-button--block': block,
        'volvo-button--dark': isDark
      }
    ]"
    :style="buttonStyle"
    :disabled="disabled || loading"
    @click="handleClick"
  >
    <div class="volvo-button__content">
      <div v-if="loading" class="volvo-button__loading">
        <span class="volvo-button__loading-dot"></span>
        <span class="volvo-button__loading-dot"></span>
        <span class="volvo-button__loading-dot"></span>
      </div>
      <slot></slot>
    </div>
  </button>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  // 按钮类型：primary-主要，secondary-次要，tertiary-文本
  type: {
    type: String,
    default: 'primary',
    validator: (value) => ['primary', 'secondary', 'tertiary'].includes(value)
  },
  // 按钮尺寸：large-大，medium-中，small-小，mini-超小
  size: {
    type: String,
    default: 'medium',
    validator: (value) => ['large', 'medium', 'small', 'mini'].includes(value)
  },
  // 是否为加载状态
  loading: {
    type: Boolean,
    default: false
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: false
  },
  // 是否为块级元素
  block: {
    type: Boolean,
    default: false
  },
  // 自定义背景色
  backgroundColor: {
    type: String,
    default: ''
  },
  // 自定义文字颜色
  textColor: {
    type: String,
    default: ''
  },
  // 是否暗黑模式
  isDark: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['click']);

// 自定义样式计算
const buttonStyle = computed(() => {
  const style = {};
  if (props.backgroundColor) {
    style['--button-bg-color'] = props.backgroundColor;
  }
  if (props.textColor) {
    style['--button-text-color'] = props.textColor;
  }
  return style;
});

// 点击事件处理
const handleClick = (event) => {
  if (!props.loading && !props.disabled) {
    emit('click', event);
  }
};
</script>

<style lang="scss" scoped>
.volvo-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  outline: none;

  // 尺寸
  &--large {
    width: 90vw;
    max-width: 327px;
    height: 48px;
    padding: 0 16px;
    font-size: 16px;
  }

  &--medium {
    width: 30vw;
    max-width: 98px;
    height: 40px;
    padding: 0 12px;
    font-size: 14px;
  }

  &--small {
    width: 25vw;
    max-width: 82px;
    height: 32px;
    padding: 0 8px;
    font-size: 12px;
  }

  &--mini {
    width: 20vw;
    max-width: 64px;
    height: 24px;
    padding: 0 4px;
    font-size: 12px;
  }

  // 类型
  &--primary {
    background-color: var(--button-bg-color, #1c6bba);
    color: var(--button-text-color, #fff);
    border: none;

    &:hover {
      background-color: lighten(#1c6bba, 10%);
    }

    &:active {
      background-color: darken(#1c6bba, 10%);
    }
  }

  &--secondary {
    background-color: #fff;
    color: var(--button-text-color, #1c6bba);
    border: 1px solid var(--button-bg-color, #1c6bba);

    &:hover {
      background-color: rgba(28, 107, 186, 0.1);
    }

    &:active {
      background-color: rgba(28, 107, 186, 0.2);
    }
  }

  &--tertiary {
    background-color: transparent;
    color: var(--button-text-color, #1c6bba);
    border: none;

    &:hover {
      background-color: rgba(28, 107, 186, 0.1);
    }

    &:active {
      background-color: rgba(28, 107, 186, 0.2);
    }
  }

  // 禁用状态
  &--disabled {
    background-color: #f5f5f5;
    color: #999;
    cursor: not-allowed;
    border-color: transparent;

    &:hover,
    &:active {
      background-color: #f5f5f5;
      color: #999;
    }
  }

  // 暗黑模式
  &--dark {
    &.volvo-button--primary {
      background-color: var(--button-bg-color, #2c3e50);
      color: var(--button-text-color, #fff);
    }

    &.volvo-button--secondary {
      background-color: transparent;
      border-color: var(--button-bg-color, #2c3e50);
      color: var(--button-text-color, #2c3e50);
    }

    &.volvo-button--tertiary {
      color: var(--button-text-color, #2c3e50);
    }

    &.volvo-button--disabled {
      background-color: #333;
      color: #666;
    }
  }

  // 加载状态相关样式保持不变
  &--loading {
    cursor: default;

    .volvo-button__content {
      opacity: 0.5;
    }
  }

  &__content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  &__loading {
    display: flex;
    align-items: center;
    gap: 2px;
  }

  &__loading-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: currentColor;
    animation: loading 1s infinite;

    &:nth-child(2) {
      animation-delay: 0.2s;
    }

    &:nth-child(3) {
      animation-delay: 0.4s;
    }
  }
}

@keyframes loading {
  0%, 100% {
    opacity: 0.2;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}
</style>
